<script setup>
	import {
		ref
	} from 'vue';
	const arrs = ref(["/static/logo.png", "/static/pic1.webp", "/static/pic2.jpg", "/static/pic4.gif"])
	const picurl = ref("/static/logo.png")
	let i = 0;
	const isActive = ref(false)
	const fontSize = ref(30);
	//计数器
	setInterval(() => {
		i++;
		picurl.value = arrs.value[i % 4]
		isActive.value = !isActive.value;
		fontSize.value += i;
	}, 1000)
</script>
<template>
	<view class="">
		<image :src="picurl"></image>

		<button type="primary" :loading="false" :disabled="false">按钮</button>
	</view>
	<!-- 常用 -->
	<view class="box" :class="{active:isActive}">v-bind的指令</view>
	<!-- 三元式 -->
	<view class="box" :class="isActive ? 'active': '' ">v-bind的指令</view>
	<!-- 内联样式 -->
	<view class="box" :style="{width: '300px',height:260+'px',fontSize:fontSize+'px'}">内联样式</view>
	<view>
		<navigator url="/pages/demo3/demo3">跳转到demo3</navigator>
	</view>
</template>
<style lang="scss" scoped>
	.box {
		width: 200rpx;
		height: 200rpx;
		background-color: orange;
		font-size: 20px;
	}

	.active {
		background-color: green;
		color: white;
	}
</style>